Composition vs Inheritance
コンポーネント間のコードの再利用に、継承よりもコンポジションを推奨する
Containment
props.childrenで子要素を参照することができる
code:JavaScript
function FancyBorder(props) {
return (
<div className={"FancyBorder FancyBorder-" + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">Welcome</h1>
<p className="Dialog-message">Thank you for visiting our spacecraft!</p>
</FancyBorder>
);
}
props.childrenで渡さずに、通常のプロパティとして渡すこともできる
code:JavaScript
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">{props.left}</div>
<div className="SplitPane-right">{props.right}</div>
</div>
);
}
function App() {
return <SplitPane left={<Contacts />} right={<Chat />} />;
}
Specialization
コンポジションで解決するなら、より具象なコンポーネントがより抽象なコンポーネントをレンダリングするように実装する
関数だけでなくクラス記法でも同様である
code:JavaScript
function FancyBorder(props) {
return (
<div className={"FancyBorder FancyBorder-" + props.color}>
{props.children}
</div>
);
}
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">{props.title}</h1>
<p className="Dialog-message">{props.message}</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog title="Welcome" message="Thank you for visiting our spacecraft!" />
);
}
So What About Inheritance?
Facebookでは継承を使っているユースケースはない
コンポーネントは、プリミティブな値やReact element、関数を任意のpropsで受け取ることができる
UIを伴わない関数を再利用したい場合、モジュールの使用をオススメする